<template>
	<div class="container" >
		<van-nav-bar fixed title="首页" />
		<!-- 轮播图 -->
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-for="item in list" :key="item.id" :item="item">
			<van-swipe-item>
				<img
					class="banner-img"
					:src="item.pic"
					alt=""
				/>
			</van-swipe-item>
		</van-swipe>
		<!-- 通知 -->
		<van-notice-bar
			left-icon="volume-o"
			text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
		/>
		<!-- 热门推荐 -->
		<van-cell>
			<h3 slot="title" class="group-title">热门推荐</h3>
		</van-cell>
		<recommend-list v-for="item in list" :key="item.id" :item="item"/>
		<!-- 最近更新 -->
		<van-cell>
			<h3 slot="title" class="group-title">最近更新</h3>
			<span>24小时： <b>0篇</b></span> /
			<span>1周： <b>0篇</b></span>
		</van-cell>
    <article-list v-for="item in list" :key="item.id" :item="item"/>
	</div>
</template>
<script>
import articleList from '@/components/article-list.vue'
import RecommendList from '../components/recommend-list.vue'
export default {
  components: { articleList,RecommendList },
	data () {
    return {
			current: 1,
      list: [],
			loading: false, 
      finished: false 
    }
  },
	methods: {
    async onLoad () {
      console.log('需要加载更多了, 应该要发送请求了...')
      const res = await articleList({
        current: this.current,
        sorter: this.sorter
      })
      this.list.push(...res.data.rows)
      console.log(this.list)
      this.loading = false
      this.current++
      if (this.current > res.data.pageTotal) {
        this.finished = true
      }
    }
  }
}
</script>
<style scoped lang="less">
.banner-img {
	width: 100%;
}
.group-title {
	color: #1989fa;
}
</style>
